<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>群组新增人员</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
  <link rel="stylesheet" href="${ctx}/extends/zTree_v3/css/zTreeStyle/zTreeStyle.css"/>
  <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
  <script type="text/javascript">
    var __ctx = "${ctx}";
  </script>
  <style>
    /*新建群聊样式*/
    .addgroupPersonnels li div{
      width: 20px;
      height: 20px;
      margin: 0 8px 0 0;
      border-radius:10px ;
      display: inline-block;
      vertical-align: middle;
      background-size: 100% 100%;
    }
    .addgroupPersonnels li span,.addgroupPersonnels li i{
      display: inline-block;
      vertical-align: middle;
      height: 20px;
    }
    .addgroupPersonnels li i{
      margin-left: 5px;
      cursor:pointer;
    }
    .addgroupPersonnels li{
      color: #009688;
      margin-bottom: 6px;
      white-space: nowrap;
    }
    .addgroupPersonnels li span span{
      color: #009688!important;
      font-weight:normal!important;
      vertical-align: unset;
      display: unset;
      height: unset;
    }
    .ztree li span.button.ico_docu{
      background-size: 100% 100% !important;
      border-radius: 8px;
    }
  </style>
</head>
<body>
<!--群聊新增人员-->
<div class="addcreatGroups">
  <div class="leftSelect" style="margin: 10px 0 0 10px;float: left">
    <input type="text" class="addmainPanelSelectPen">
    <ul id="addmainPanelSelect" class="ztree" style="height: 310px;width:230px;overflow: auto"></ul>
  </div>
  <div class="rightSelect" style="float: left;margin-top: 35px;margin-left: 6px">
    <p style="position: absolute;top: 5px">已选添加人员列表</p>
    <ul class="addgroupPersonnels" style="height: 310px;width:230px;overflow: auto;"></ul>
  </div>
</div>
<button type="button" class="addcreatGroupsData" style="display:none" ccpim-event="addcreatGroupsData"></button>
<script src="${ctx}/extends/jquery.min.js"></script>
<script src="${ctx}/layui/layui.js"></script>
<script src="${ctx}/public/component.js" type="text/javascript"></script>
<script src="${ctx}/extends/zTree_v3/js/jquery.ztree.all.min.js" type="text/javascript"></script>
<script src="${ctx}/extends/zTree_v3/js/jquery.ztree.exhide.min.js" type="text/javascript"></script>
<script>
  layui.use(['jquery','layer','layim'], function(){
    var $=layui.jquery,layer=layui.layer,layim=layui.layim;
    var groupid='${roomId}';

    var userinfo=[];//存放选择数据

    datainitialization();
    function datainitialization(){
      userinfo=[];
      $('.addgroupPersonnels').html('');
      $.ajax({
        url:serverPath.systemPath +"/im/mainPanelInit?roomId="+groupid+"&type=1" ,
        type: "get",
        contentType: 'application/json',
        dataType: 'json',
        success: function(data) {
          var datas = data.data;
          var zNodes=[];
          for (var i=0;i<datas.friend.length;i++){
            var childrens=datas.friend[i].list;
            var dataChildren=[];
            for (var j=0;j<childrens.length;j++){
              dataChildren.push({
                icon:childrens[j].avatar,
                id:childrens[j].id,
                name:childrens[j].username
              });
            }
            zNodes[i]={
              name:datas.friend[i].groupname,
              children:dataChildren
            }
          }
          var setting = {
            data: {
              simpleData: {
                enable: true
              }
            },
            view: {
              showLine: false
            },
            callback: {
              onClick: onClick
            }
          };
          $.fn.zTree.init($('#addmainPanelSelect'), setting, zNodes);
          var treeObj = $.fn.zTree.getZTreeObj('addmainPanelSelect');
          treeObj.expandAll(true);
          component.fuzzySearch('addmainPanelSelect','.addmainPanelSelectPen',null,true); //初始化模糊搜索方法
          function onClick(event, treeId, treeNode, clickFlag) {
            if (treeNode.children) {
              return false;
            }
            for(i=0;i<userinfo.length;i++) {
              if (userinfo[i].id==treeNode.id){
                return false;
              }
            }
            userinfo.push({id: treeNode.id, name: treeNode.name});
            $('.addgroupPersonnels').append('<li><div style="background-image:url(' + treeNode.icon + ')"></div><span>' + treeNode.name + '</span><i class="layui-icon layui-icon-close" id="' + treeNode.id + '" ccpim-event="canGroupPen" style="margin-left: 5px;cursor: pointer"></i></li>')
          }
        },
      });
    }


        var events={
            addcreatGroupsData:function () {
              if(userinfo.length<1){
                layer.alert('请选择数据');
                return false;
              }
              var userIds=[];
              var addUserNames=[];
              for (var i=0;i<userinfo.length;i++){
                userIds.push(userinfo[i].id);
                addUserNames.push(userinfo[i].name);
              }
              $.ajax({
                url: serverPath.imPath + "/im/imRoomUser/addRoomUsers",
                type: "post",
                contentType: 'application/json',
                dataType: 'json',
                data: JSON.stringify({userIds:userIds,roomId:groupid,addUserNames:addUserNames}),
                success: function (result) {
                  if(result.code=='0'){
                    parent.layer.alert(result.msg,function (index) {
                      // datainitialization();
                      parent.layer.close(index);
                      parent.layer.close(parent.layer.getFrameIndex(window.name));
                    });
                  }else if(result.code=='2'){
                    parent.layer.alert(result.msg,function (index) {
                      parent.layer.close(index);
                      parent.layer.close(parent.layer.getFrameIndex(window.name));
                    });
                  } else{
                    parent.layer.alert(result.msg,function (index) {
                      parent.layer.close(index);
                    });
                  }
                }
              });
            }
                //取消群聊已选人员
                ,canGroupPen:function(){
                  var id= $(this).attr('id');
                  $(this).parent().remove();
                  for (var i=0;i<userinfo.length;i++){
                    if(userinfo[i].id==id){
                      userinfo.splice(i,1)
                    }
                  }
              }
            };


        $('body').on('click', '*[ccpim-event]', function(e){
          var othis = $(this), methid = othis.attr('ccpim-event');
          events[methid] ? events[methid].call(this, othis, e) : '';
        });
  })
</script>
</body>
</html>
